<template>
  <div class="yq-login-container">
    <a-row>
      <a-col :xs="0" :md="0" :sm="12" :lg="14" :xl="16"></a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="6">
        <div class="yq-login-container-form">
          <div class="yq-login-container-hello">hello!</div>
          <div class="yq-login-container-title">欢迎来到 {{ title }}</div>
          <a-form :model="form" @submit="handleSubmit" >
            <a-form-item>
              <a-input v-model:value="form.userName" placeholder="Username" size="large">
                <template v-slot:prefix>
                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                v-model:value="form.passwd"
                type="password"
                placeholder="Password"
                size="large"
              >
                <template v-slot:prefix>
                  <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                :disabled="form.userName === '' || form.passwd === ''"
              >
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script setup>
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { useStore, useUserStore } from "@/store";
import { storeToRefs } from "pinia";
import { reactive, watch, ref } from "vue";
const title = import.meta.env.VITE_VUE_APP_TITLE;
const store = useStore();
const aaa = useUserStore();
const redirect = ref("");
const route = useRouter();
watch(
  () => route.currentRoute.value,
  (route) => {
    redirect.value = (route.query && route.query.redirect) || "/";
  },
  {
    immediate: true,
  }
);
const form = reactive({
  userName: "",
  passwd: "",
});

const handleRoute = () => {
  return redirect.value === "/404" || redirect.value === "/403"
    ? "/"
    : redirect.value;
};

const handleSubmit = async () => {
  store.login(form);
  await route.push(handleRoute());
};
</script>
<style lang="scss" scoped>
@include yq("login-container") {
  width: 100%;
  height: 100vh;
  background: url("@/assets/login_images/login_background.jpg");
  background-size: cover;

  &-form {
    height: 40vh;
    padding: 4vh;
    margin-top: calc((100vh - 380px) / 2);
    margin-right: 20px;
    margin-left: 20px;
    background: url("@/assets/login_images/login_form.png");
    background-size: 100% 100%;
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
  }

  &-hello {
    font-size: 32px;
    @include fetch-theme-custom("color", "color");
  }

  &-title {
    margin-bottom: 30px;
    font-size: 20px;
    @include fetch-theme-custom("color", "color");
  }

  &-tips {
    position: fixed;
    bottom: $base-padding;
    width: 100%;
    height: 40px;
    color: rgba(255, 255, 255, 0.856);
    text-align: center;
  }

  .ant-col {
    width: 100%;
    padding: 0 10px 0 10px;
  }

  .ant-input {
    height: 35px;
  }

  .ant-btn {
    width: 100%;
    height: 45px;
    border-radius: 99px;
  }
}
</style>
